<template>
    <div class="outboundId-box">
        <!-- 出库 -->
        <serchForm :Form="inventoryForm" :FormLabel="inventoryFormLabel" @onSearch="onSearch" />
        <div class="function-box">
            <el-button class="createBtn" @click="addOutboundOrder" v-if="checkPermi(['system:inventory:edit'])"><i class="iconfont icon-plus-square" />新增</el-button>
            <el-button class="visitBtn" @click=""  v-if="checkPermi(['system:inventory:edit']) && false"><i class="iconfont icon-daochu" ></i>
                导出
            </el-button>
        </div>
        <forTableCom :color="color" :idActive="idActive" :bg="bg" :total="total" :page="pageNum" :limit="pageSize"
            @handleSelectionChange="handleSelectionChange" @handleChange="handleChange"
            :tableHeaderData="inventoryTableHeaderData" :tableData="inventoryTableData" @tableDetail="tableDetail">
        </forTableCom>
        <outboundOrderCom @popUpsFlase="popUpsFlase" v-if="flag" :popTitle="popTitle" :disabled="disabled"
            @getoutboundOrderData="getoutboundOrderData" :PopData="PopData" :defindFlag="defindFlag" />
    </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import { getWorkApi } from '@/api/tickets';
import { querySelectOutboundApi, deleteSelectOutboundApi } from '@/api/inventory';
import { ref, onMounted } from 'vue';
import { sliceDate } from '@/utils/date.js';
import { ElMessage } from 'element-plus';
import outboundOrderCom from './components/outboundOrderCom';
import { deletePopHook } from '@/hook/setPop/deletePop.js';
import { checkPermi } from "@/utils/permission.js";
// 
let deletePop = deletePopHook()
// 弹窗
let flag = ref(false)
let disabled = ref(false)
// 弹窗标题
let popTitle = ref('新增出库单信息')
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')

// 总条目数   pageSize 加 1
let total = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])
// 修改详情回显数据弹窗
let PopData = ref([])
// 详情控制变量
let defindFlag = ref(true)


// 勾选背景id
const idActive = 'outboundId'

// 表单
let inventoryForm = ref(
    {
        outboundId: '',         // 出库编号
        outboundDate: '',       // 出库日期
        outboundType: '',       // 出库类型
        custId: '',             // 出库编号
        productId: ''         // 存货名称 productName
    }
)
// 表单数据标题
let inventoryFormLabel = ref([
    {
        name: 'outboundId',
        label: '出库编号',
    },
    {
        name: 'outboundDate',
        label: '出库日期',
        type: 'picker'
    },
    {
        name: 'outboundType',
        label: '出库类型'
    },
    {
        name: 'custId',
        label: '客户名称',
        type: 'select',
        client: [
            {
                label: '安装',
                value: '1'
            },
            {
                label: '下载',
                value: '2'
            },
        ]
    },
    {
        name: 'productId',
        label: '存货名称'
    },
])


// 表格表头数据
let inventoryTableHeaderData = ref([
    {
        prop: 'outboundId',
        label: '出库编号',
        colorClassName: 'activeColor'
    },
    {
        prop: 'outboundDate',
        label: '出库日期',
        colorClassName: 'activeColor'
    },
    {
        prop: 'outboundType',
        label: '出库类型'
    },
    {
        prop: 'productId',
        label: '存货名称'
    },
    {
        prop: 'specs',
        label: '规格型号'
    },
    {
        prop: 'unit',
        label: '单位'
    },
    {
        prop: 'outboundNumber',
        label: '出库数量'
    },
    {
        prop: 'price',
        label: '单价'
    },
    {
        prop: 'totalPrice',
        label: '总金额'
    },
    {
        prop: 'customerName',
        label: '客户名称'
    },
    {
        prop: 'warehouseName',
        label: '出库仓库'
    },
    {
        prop: 'outboundPerson',
        label: '出库人'
    }
])
// 表格数据内容
let inventoryTableData = ref([])

// 选中的列
const handleSelectionChange = (v) => {
    multipleSelection.value = v
}


// 打开新增弹窗
const addOutboundOrder = () => {
    flag.value = true
    disabled.value = false
    popTitle.value = '新增出库单信息'
}
// 详情双击行
const tableDetail = (props) => {
    disabled.value = true
    flag.value = true
    popTitle.value = '出库单详情信息'
    defindFlag.value = false
    PopData.value = props
}
// 关闭弹窗
const popUpsFlase = (v) => {
    flag.value = v
    defindFlag.value = true
}
// 查询入库单数据
const queryOutboundList = async (data = '') => {
    let res = await querySelectOutboundApi(data)
    let { code, rows, total } = res
    try{
        if (code == 200) {
            rows.forEach(v=>{
                for (const key in v.outboundDetailVOS[0]) {
                    v[key] = v.outboundDetailVOS[0][key]
                }
            })
            // 改变日期显示长度问题
            inventoryTableData.value = sliceDate(rows, 'outboundDate')
            // for (const key of rows[0].outboundDetailVOS) {
            //     inventoryTableData.value[key] = rows[0].outboundDetailVOS[key]
            // }
            total.value = total
           
        }
    }catch{}
}
// 查找
const onSearch = (v) => {
    // 每次查询后回到页1
    pageNum.value = 1
    getoutboundOrderData(v)
}

// 分页器大小  当前分页器
const handleChange = (v) => {
    let { page, limit } = v.page
    pageNum.value = page
    pageSize.value = limit
    let obj = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    }
    let params = Object.assign(obj, inventoryForm.value)
    queryOutboundList(params)
}
// 请求出库单接口函数
const getoutboundOrderData = () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    }
    queryOutboundList(params)
}
// 获取客户下拉信息
const getWorkInfo = async (data = '') => {
    let params = { 'customerName': data }
    let res = await getWorkApi(params)
    if (res.code == 200) {
        try{
            res.data.forEach((item, i) => {
                inventoryFormLabel.value.forEach(v => {
                    console.log(v);
                    if (v.name == 'custId') {
                        v.client.forEach(v1 => {
                            v1[i].label = item.customerName
                            v1[i].value = item.customerId
                        })
                    }
                })
                // inventoryFormLabel.value 不能乱排
                inventoryFormLabel.value[3].client[i].label = v.customerName
                inventoryFormLabel.value[3].client[i].value = v.customerId
            })
        }catch{}
    }
}
onMounted(() => {
    getWorkInfo()
    getoutboundOrderData()
})
</script>
<style scoped lang='scss'>
.outboundId-box {
    padding: 16px;
}
</style>
